<template>
  <div class="invoice">
    <h3 class="invice-title">{{ $t("user_invoice") }}</h3>
    <div class="invice-form"
      v-loading="inviceFormLoading">
      <el-form ref="form"
        :model="inviceForm"
        :rules="rules"
        size="large"
        label-position="top">
        <el-row>
          <el-col :span="21"
            :xs="24">
            <el-row :gutter="20">
              <el-col :span="12"
                :xs="24">
                <el-form-item :label="$t('user_email')"
                  prop="account">
                  <el-input v-model="inviceForm.account"
                    :disabled="true"
                    maxlength="255"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"
                :xs="24">
                <el-form-item :label="$t('user_userName')">
                  <el-input v-model="inviceForm.username"
                    :disabled="saveLoading"
                    maxlength="255"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="21"
            :xs="24">
            <el-form-item :label="$t('user_company')">
              <el-input v-model="inviceForm.company"
                :disabled="saveLoading"
                maxlength="255"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12"
            :xs="24">
            <el-form-item :label="$t('user_countryOrRegion')">
              <el-select placeholder=""
                v-model="inviceForm.country"
                :filter-method="
                        (val) =>
                          selectFilter(val, countries, 'countriesOptions')
                      "
                :disabled="saveLoading"
                filterable
                clearable
                @focus="selectFocus(countries, 'countriesOptions')"
                style="width: 100%">
                <el-option v-for="item in countriesOptions"
                  :key="`${item.value}-${item.label}`"
                  :label="item.label"
                  :value="item.label">
                  <div class="country-option">
                    <img :src="getImage(item.value)"
                      v-if="
                              item.value !== 'other' && getImage(item.value)
                            "
                      alt=""
                      srcset="" />
                    <span>{{ item.label }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            :xs="24">
            <el-form-item :label="$t('user_phone')">
              <el-input v-model="inviceForm.phone"
                :disabled="saveLoading"
                maxlength="255">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"
            :xs="24">
            <el-form-item :label="$t('user_city')">
              <el-input v-model="inviceForm.city"
                :disabled="saveLoading"
                maxlength="255"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            :xs="24">
            <el-form-item :label="$t('user_stateOrProvince')">
              <el-input v-model="inviceForm.province"
                :disabled="saveLoading"
                maxlength="255"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            :xs="24">
            <el-form-item :label="$t('user_zipOrPostal')">
              <el-input v-model="inviceForm.postal"
                :disabled="saveLoading"
                maxlength="255"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item :label="$t('user_address')">
          <el-input v-model="inviceForm.address"
            :disabled="saveLoading"
            maxlength="255"></el-input>
        </el-form-item>
        <el-form-item :label="$t('user_vat')">
          <el-input v-model="inviceForm.vat"
            :disabled="saveLoading"
            maxlength="255"></el-input>
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <el-button type="primary"
          class="btn"
          size="large"
          @click="onSave"
          :loading="saveLoading">{{ $t("user_save") }}</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Invoice',
  props: {},
  data() {
    return {
      countriesOptions: [],
      inviceForm: {},
      saveLoading: false,
      inviceFormLoading: false,
      rules: {
        email: [
          {
            required: true,
            message: 'Please enter your email',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  watch: {
    userinfo: {
      handler(val) {
        this.inviceForm = JSON.parse(JSON.stringify(val))
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    ...mapState({
      toolify_isLogin: (state) => state.toolify_isLogin,
      userinfo: (state) => state.userinfo,
      locale: (state) => state.locale,
      countries: (state) => state.countries,
    }),
  },
  mounted() {
    this.getUserinfo()
    this.countriesOptions = JSON.parse(JSON.stringify(this.countries))
    this.inviceForm = JSON.parse(JSON.stringify(this.userinfo))
    this.inviceFormLoading = false
  },
  methods: {
    ...mapMutations(['SET_USERINFO']),
    
    selectFilter(val, options, target) {
      if (val !== '' && val !== null) {
        let str = String(val).toLowerCase()
        let results = options.filter((item) => {
          return (
            String(item.label).toLowerCase().includes(str) ||
            String(item.value).toLowerCase().includes(str)
          )
        })

        this[target] = JSON.parse(JSON.stringify(results))
      } else {
        this[target] = JSON.parse(JSON.stringify(options))
      }
    },
    selectFocus(options, target) {
      this.$nextTick(() => {
        this[target] = JSON.parse(JSON.stringify(options))
      })
    },
    //判断是否有国旗
    getImage(name) {
      try {
        const image = require('@/static/images/flags/' + name + '.png')
        if (image) {
          return image
        } else {
          return ''
        }
      } catch (error) {
        //console.log(error)
      }
    },
    async onSave() {
      this.saveLoading = true
      try {
        await this.$axiosApi.setUserinfo(this.inviceForm)
        await this.getUserinfo()
        this.$message.success(this.$i18n.t('user_saveSuccessfully'))
        this.saveLoading = false
      } catch (error) {
        this.saveLoading = false
      }
    },
    async getUserinfo() {
      if (this.toolify_isLogin) {
        try {
          const res = await this.$axiosApi.userinfo()
          if (res && res.code === 200 && res.data && res.data.user) {
            this.SET_USERINFO(res.data.user)
            this.SET_ADVERTISER(res.data.advertiser)
          }
        } catch (error) {}
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.invoice {
  .invice-title {
    font-weight: bold;
    font-size: 28px;
    color: #191919;
    line-height: 34px;
    margin: 22px 0;
  }
  .invice-form {
    padding: 26px 20px 30px 20px;
    background: #ffffff;
    box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    ::v-deep .el-form {
      .el-form-item {
        margin-bottom: 18px;
        .el-form-item__label {
          font-size: 16px;
          color: #191919;
          line-height: 24px;
        }
      }
    }
    .btn-wrap {
      margin-top: 30px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .btn {
        width: 147px;
        font-family: 'Plus Jakarta Sans';
        font-size: 16px;
      }
    }
  }
}
</style>
